OpenLayers的点击事件 |
您所在的位置:网站首页 › openlayer3 图标更换 › OpenLayers的点击事件 |
OpenLayers的点击事件是附加在整个ol.Map对象上的: var selectSingleClick = new ol.interaction.Select(); map.addInteraction(selectSingleClick); selectSingleClick.on('select', function(e) { var features = e.target.getFeatures().getArray(); if(features.length > 0) { console.log(features[0].values_); } });点击事件是通过点击具体的Feature触发的,点击底图并不会触发点击事件。 点击事件触发后,就会执行上面的回调函数。可以在回调函数中执行需要进行的操作。 然而,该事件是针对整个ol.Map对象。所以对于不同的Feature,都会触发上面同一个回调。那么,若不同的Feature所需要的回调逻辑不同,这样就得做条件处理。 例如,点击一个点,弹窗提示点的位置;点击一个圆,弹窗提示圆的半径。 于是在上面的if条件中,就可以加个switch来判断当前点击的是点还是圆(例如通过id来判断),然后做对应的处理。 这样处理最为直观,但烦琐且工作量大。设区别图形是使用id,那么有一万个图形,switch中就需要出现一万个条件。于是考虑到,是否可以将点击图形的回调和参数传入,点击某个Feature,就触发该Feature自己的回调。 对于回调参数e,有个属性values_。该属性是定义Feature时传入的参数。 例如,定义点Feature: new ol.Feature({ geometry: new ol.geom.Point(coordinate) })打印点击事件的values_属性: console.log(features[0].values_);控制台会输出: { geometry: {...} }也就是说,Feature创建时的参数会被放入values_属性中。所以在Feature创建时附加data参数: new ol.Feature({ geometry: new ol.geom.Point(coordinate), data: { callback: function(params) { console.log(params); }, callbackParams: {} } })打印点击事件的values_属性: { geometry: {...}, data: { callback: function(params) { console.log(params); }, callbackParams: {} } }所以,在处理Map的点击时: selectSingleClick.on('select', function(e) { var features = e.target.getFeatures().getArray(); if(features.length > 0) { var data = features[0].values_.data; if(data.callback) { data.callback(e, data.callbackParams); } } });这样,就会执行该Feature自己的回调函数。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |